<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 23:13:35
 * @LastEditTime: 2025-01-26 17:16:29
 * @FilePath: /env-manager-pc/src/views/document/device/index.vue
-->
<script setup lang="ts">
import { useClassifys, useDeviceStates, useOwnerOrgs } from '@/utils/dataHook'
import { QueryObj } from '@/utils/dataHook/data'
import { usePage } from '@/utils/commonHook'
import docmentApi from '@/api/modules/document'
import type { DeviceRow } from '@/api/modules/types/document'
import useKeepAliveStore from '@/store/modules/keepAlive'

defineOptions({
  name: 'DocumentDeviceList',
})
const keepAliveStore = useKeepAliveStore()

onBeforeRouteLeave((to) => {
  if (to.name === 'document-device-detail') {
    keepAliveStore.add('DocumentDeviceList')
  }
  else {
    keepAliveStore.remove('DocumentDeviceList')
  }
})
const router = useRouter()

const searchData = reactive(new QueryObj({
  objType: 'DIM.Business.Enterprise',
  Filters: ['DIM.Devices.Filters.AssetCodeFilter', 'DIM.Devices.HJ212.DeviceFilters.MNFilter', 'DIM.Devices.Filters.OwnerOrgGUIDFilter', 'DIM.Devices.Filters.StateFilter', 'DIM.Business.DeviceFilters.EntNameFilter',
    {
      Type: 'DIM.GYHR.DeviceFilters.OwnerOrgClassify',
      FilterKey: '',
      valueKey: 'DIM.GYHR.DeviceFilters.OwnerOrgClassify',
      mutlip: true,
    },
  ],
}))
const { page, pageNumChange, pageSizeChange } = usePage(getTableData)

const OwnerList = useOwnerOrgs()
const runStatusList = useDeviceStates()
const OwnerOrgClassify = useClassifys()
const defaultProps = {
  children: 'Children',
  label: 'Name',
}

function search() {
  page.PageNum = 1
  getTableData()
}
const tableData = ref<DeviceRow[]>([])
const loading = ref(false)

async function getTableData() {
  loading.value = true
  const res = await docmentApi.GetElectricDeviceList({
    objFilter: searchData.getQuery(),
    pageSize: page.PageSize,
    pageNum: page.PageNum,
  })
  loading.value = false
  // console.log('%c [ res ]-27', 'font-size:13px; background:pink; color:#bf2c9f;', res)
  const { Rows, RecordsetCount } = res
  tableData.value = Rows || []
  page.RecordsetCount = RecordsetCount
}

function toSetting(row: DeviceRow) {
  sessionStorage.setItem('deviceInfo', JSON.stringify(row))
  router.push(`/document/device/detail/${row.DevObjID}`)
}

getTableData()
</script>

<template>
  <div>
    <PageHeader>
      <template #content>
        <ElForm label-width="100">
          <ElRow>
            <ElCol :span="6">
              <ElFormItem label="设备编码">
                <ElInput v-model="searchData['DIM.Devices.Filters.AssetCodeFilter']" clearable placeholder="请输入" />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="MN号">
                <ElInput v-model="searchData['DIM.Devices.HJ212.DeviceFilters.MNFilter']" clearable placeholder="请输入" />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="运维公司">
                <el-tree-select
                  v-model="searchData['DIM.Devices.Filters.OwnerOrgGUIDFilter']"
                  value-key="Code"
                  class="w-full"
                  :data="OwnerList"

                  :render-after-expand="false"
                  :props="defaultProps"
                  clearable check-strictly
                />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="运行状态">
                <ElSelect v-model="searchData['DIM.Devices.Filters.StateFilter']" class="w-full" clearable placeholder="请选择">
                  <ElOption v-for="item in runStatusList" :key="item.StateID" :label="item.Name" :value="item.StateID" />
                </ElSelect>
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="企业名称">
                <ElInput v-model="searchData['DIM.Business.DeviceFilters.EntNameFilter']" clearable placeholder="请输入" />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="类型">
                <ElSelect v-model="searchData['DIM.GYHR.DeviceFilters.OwnerOrgClassify']" class="w-full" clearable multiple placeholder="请选择">
                  <ElOption v-for="(label, value) in OwnerOrgClassify" :key="value" :value="Number(value)" :label="label" />
                </ElSelect>
              </ElFormItem>
            </ElCol>
            <ElCol :span="6" :push="6" class="flex flex-justify-end">
              <ElButton type="primary" @click="search">
                查询
              </ElButton>
              <ElButton type="warning">
                导出
              </ElButton>
            </ElCol>
          </ElRow>
        </ElForm>
      </template>
    </PageHeader>
    <PageMain>
      <div v-auto-height="85">
        <vxe-table
          height="100%"
          auto-resize border
          :data="tableData"
          :loading="loading"
          :row-config="{ isCurrent: true }"
        >
          <VxeColumn title="序号" type="seq" width="80" />
          <VxeColumn field="OwnerOrgClassifyName" title="类型" min-width="100" />
          <VxeColumn field="OwnerOrgName" title="运维公司" min-width="100" show-overflow />
          <VxeColumn field="EntName" title="企业名称" min-width="100" show-overflow />
          <VxeColumn field="DevName" title="设备名称" min-width="100" show-overflow />
          <VxeColumn field="AssetCode" title="设备编码" min-width="100" />
          <VxeColumn field="MN" title="MN号" min-width="150" show-overflow />
          <VxeColumn field="PointCode" title="采集因子" min-width="100" />
          <VxeColumn field="StateName" title="运行状态" width="100" />
          <VxeColumn field="date" title="操作" width="150" fixed="right">
            <template #default="{ row }">
              <ElButton type="primary" link @click="toSetting(row)">
                通讯设置
              </ElButton>
            </template>
          </VxeColumn>
        </vxe-table>
      </div>
      <ElPagination
        class="mt-4"
        :page-size="page.PageSize"
        :total="page.RecordsetCount"
        :current-page="page.PageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        @current-change="pageNumChange"
        @size-change="pageSizeChange"
      />
    </PageMain>
  </div>
</template>
